<template>
  <div>
      <div class="part1">
        <div  class="step1">
            <img v-show="this.step>=1" src="../../assets/state/step1.png" >
            <a  v-show="this.step>=1" class="bi_title">创作者在抖音提交视频</a>
            <div  v-show="this.step>=1" class="sm_title">抖音同步到视创</div>
        </div>
        <div  class="step3">
             <img v-show="this.step>=3" src="../../assets/state/step3.png" >
            <a v-show="this.step>=3" class="bi_title">广告主上传产品</a>
            <div  v-show="this.step>=3" class="sm_title">包括模型、信息等</div>
        </div>
        <div  class="step4">
            <img v-show="this.step>=4" src="../../assets/state/step3.png" >
            <a v-show="this.step>=4" class="bi_title">广告主投放广告</a>
            <div  v-show="this.step>=4" class="sm_title">通过播放量形式</div>
        </div>
        <div  class="step5">
             <img v-show="this.step>=5" src="../../assets/state/step1.png" >
            <a v-show="this.step>=5" class="bi_title">创作者同意合作</a>
            <div  v-show="this.step>=5" class="sm_title">可查看AR效果</div>
        </div>
        <div  class="step7">
            <img  v-show="this.step>=7" src="../../assets/state/step4.png" >
            <a  v-show="this.step>=7" class="bi_title">不同观看者看到不容广告</a>
            <div   v-show="this.step>=7" class="sm_title">可以进行手势交互，同时播放量-1</div>
        </div>
        <div  class="step8">
             <img  v-show="this.step>=8" src="../../assets/state/step1.png" >
            <a  v-show="this.step>=8" class="bi_title">创作者选择不再</a>
            <div   v-show="this.step>=8" class="sm_title_2">接受广告</div>
        </div>
      </div>
      <div  class="part2" >
          <div class="line"></div>
          <div class="circle">
              <div class="circle1">
                  <div :class="circle1">
                    <a v-if="circle1!='circle1_3'" class="circle_font">1</a>
                    <a v-if="circle1=='circle1_3'" class="circle_font">✓</a>
                  </div>
              </div>
              <div class="circle1">
                  <div :class="circle2">
                    <a v-if="circle2!='circle1_3'" class="circle_font">2</a>
                    <a v-if="circle2=='circle1_3'" class="circle_font">✓</a>
                  </div>
                  </div>
              <div class="circle1">
                    <div :class="circle3">
                        <a  v-if="circle3!='circle1_3'" class="circle_font">3</a>
                        <a v-if="circle3=='circle1_3'" class="circle_font">✓</a>
                    </div>
              </div>
              <div class="circle1">
                   <div :class="circle4">
                       <a v-if="circle4!='circle1_3'" class="circle_font">4</a>
                        <a  v-if="circle4=='circle1_3'" class="circle_font">✓</a>
                    </div>
              </div>
              <div class="circle1">
                   <div :class="circle5">
                       <a v-if="circle5!='circle1_3'" class="circle_font">5</a>
                        <a v-if="circle5=='circle1_3'" class="circle_font">✓</a>
                       </div>
              </div>
              <div class="circle1">
                   <div :class="circle6">
                       <a  v-if="circle6!='circle1_3'" class="circle_font">6</a>
                        <a  v-if="circle6=='circle1_3'" class="circle_font">✓</a>
                       </div>
              </div>
              <div class="circle1">
                   <div :class="circle7">
                       <a v-if="circle7!='circle1_3'" class="circle_font">7</a>
                        <a v-if="circle7=='circle1_3'" class="circle_font">✓</a>
                       </div>
              </div>
              <div class="circle1">
                   <div :class="circle8">
                       <a v-if="circle8!='circle1_3'" class="circle_font">8</a>
                        <a v-if="circle8=='circle1_3'" class="circle_font">✓</a>
                    </div>
              </div>
          </div>
      </div>
    <div class="part3">
        <div class="step0"></div>
        <div class="step2" >
            <img  v-show="this.step>=2" src="../../assets/state/step2.png" >
            <a   v-show="this.step>=2" class="bi_title3">视创分析广告位，上传到WEB平台招商</a>
             <div   v-show="this.step>=2" class="sm_title_3">分析方法1：定位宝读取</div>
             <div   v-show="this.step>=2" class="sm_title_3">分析方法2：平面识别自动计算</div>
        </div>
        <div class="step9" >
            <img  v-show="this.step>=5" src="../../assets/state/step5.png" >
            <div   v-show="this.step>=5" class="bi_title4">同一视频</div>
             <div   v-show="this.step>=5" class="sm_title4">可接受多笔广告订单</div>
        </div>
        <div class="step2" >
            <img   v-show="this.step>=6" src="../../assets/state/step2.png" >
            <a   v-show="this.step>=6" class="bi_title3">视创实时渲染，传回抖音</a>
             <div   v-show="this.step>=6" class="sm_title_3">结合抖音提供的用户画像</div>
        </div>
    </div>
    <div class="part4">
        <div class="btn1"></div>
        <div class="btn2">
            <el-button type="info" @click="next()">下一步</el-button>
        <el-button type="info" @click="newstart()">重置</el-button>
        </div>
        
    </div>

  </div>
</template>

<script>
export default {
    data() {
        return {
            circle1:"circle1_2",
            circle2:"circle1_2",
            circle3:"circle1_2",
            circle4:"circle1_2",
            circle5:"circle1_2",
            circle6:"circle1_2",
            circle7:"circle1_2",
            circle8:"circle1_2",
            //"circle1_2":未开始"circle1_1"：进行中"circle1_3"：已完成
            step:1,
        }

    },
    methods: {
        next(){
            this.step=this.step+1;
            if(this.step==1){
                this.circle1="circle1_1"
            }
            if(this.step==2){
                this.circle1="circle1_3";
                this.circle2="circle1_1"
            }
            if(this.step==3){
                this.circle2="circle1_3";
                this.circle3="circle1_1"
            }
             if(this.step==4){
                this.circle3="circle1_3";
                this.circle4="circle1_1"
            }
             if(this.step==5){
                this.circle4="circle1_3";
                this.circle5="circle1_1"
            }
             if(this.step==6){
                this.circle5="circle1_3";
                this.circle6="circle1_1"
            }
             if(this.step==7){
                this.circle6="circle1_3";
                this.circle7="circle1_1"
            }
             if(this.step==8){
                this.circle7="circle1_3";
                this.circle8="circle1_1"
            }
             if(this.step==9){
                this.circle8="circle1_3";
                this.circle9="circle1_1"
            }
        },
         newstart(){
            this.step=0;
            this.circle1="circle1_2";
            this.circle2="circle1_2";
            this.circle3="circle1_2";
            this.circle4="circle1_2";
            this.circle5="circle1_2";
            this.circle6="circle1_2";
            this.circle7="circle1_2";
            this.circle8="circle1_2";
        }

    },

}
</script>

<style scoped>
@import "../../style/state.css";
</style>